<template v-if="showload">
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>{{$t('sidebar.operator')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('proManage.crumbsOne')}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{$t('proManage.crumbsTwo')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- ------------搜索查询栏开始-------------- -->
    <search :searchData="searchData" @search="search" :searchRight="true"></search>
    <!-- ------------ 搜索查询栏结束 -------------- -->
    <div class="list_operation">
          <el-button v-if="$store.state.common.permiss.productlist.includes('addapk')" type="primary" @click.stop="addApp">{{$t('proManage.addApk')}}</el-button>
    </div>
    <div class="table">
        <el-table :data="tableData1" size="small" stripe highlight-current-row v-loading="loadFlag"  @current-change="selectApp">
          <el-table-column align="center" prop="id" :label="$t('proManage.no2')">
          </el-table-column>
          <el-table-column align="center" prop="appName" :label="$t('public.appName')">
          </el-table-column>
          <el-table-column align="center" prop="appPackage" :label="$t('public.appPackage')">
          </el-table-column>
          <el-table-column align="center" prop="version" :label="$t('proManage.version')">
          </el-table-column>
          <el-table-column align="center" prop="newAppPackage" :label="$t('proManage.no3')">
          </el-table-column>
          <el-table-column align="center" prop="operation" :label="$t('public.operation')">
            <template slot-scope="scope">
              <span v-if="$store.state.common.permiss.productlist.includes('upgrade')" class="table_opr" @click="changeApp(scope.row)">
                {{$t('proManage.appUpdate')}}
              </span>
              <span class="table_opr" @click="delapp(scope.row.id)" v-if="$store.state.common.permiss.productlist.includes('delapk')">{{$t('idManage.del')}}
              </span>
            </template>
          </el-table-column>
        </el-table>
    </div>
    <el-row  type="flex" justify="end" v-if="true" class="pages">
        <el-pagination
          @current-change="handleCurrentChange1"
          :current-page="currentPage1"
          layout="total, prev, pager, next, ->"
          :total="pageTotal1?pageTotal1:0">
        </el-pagination>
    </el-row>
    <div class="list_operation">
    <el-button v-if="$store.state.common.permiss.productlist.includes('addpro')&&selectApk" type="primary" @click.stop="addPro">{{$t('proManage.add')}}</el-button>
    <el-button v-else-if="$store.state.common.permiss.productlist.includes('addpro')&&!selectApk" type="primary" disabled>{{$t('proManage.add')}}</el-button>
    </div>
    <div class="table">
        <el-table :data="tableData2" size="small" stripe v-loading="loadFlag1">
          <el-table-column align="center" prop="id" :label="$t('proManage.id')">
            <template slot-scope="scope">
              <span v-if="scope.row.initDataBO&&scope.row.initDataBO.thisProductDefaultCount>0" style="color:#f00">*</span>
              <span>{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="productAmountMax" :label="$t('proManage.productAmountMax')">
            <template slot-scope="scope">
              <span>{{$store.getters.moneySplit(scope.row.productAmountMax)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="productAmountMin" :label="$t('proManage.productAmountMin')">
            <template slot-scope="scope">
              <span>{{$store.getters.moneySplit(scope.row.productAmountMin)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="currency" :label="$t('proManage.currency')" :formatter="currencyFormat">
          </el-table-column>
          <el-table-column align="center" prop="productAmountPer" :label="$t('proManage.productAmountPer')">
          </el-table-column>
          <el-table-column align="center" prop="productPeriodMax" :label="$t('proManage.productPeriodMax')">
          </el-table-column>
          <el-table-column align="center" prop="productPeriodMin" :label="$t('proManage.productPeriodMin')">
          </el-table-column>
          <el-table-column align="center" prop="productPeriodPer" :label="$t('proManage.productPeriodPer')">
          </el-table-column>
          <el-table-column align="center" prop="dayInterest" :label="$t('proManage.dayInterest')">
            <template slot-scope="scope">
              <span>{{$store.getters.twoPoint(scope.row.dayInterest)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="feeRate" :label="$t('proManage.feeRate')">
            <template slot-scope="scope">
              <span>{{$store.getters.twoPoint(scope.row.feeRate)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="overdueInterest" :label="$t('proManage.overdueInterest')">
            <template slot-scope="scope">
              <span>{{$store.getters.twoPoint(scope.row.overdueInterest)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="overdueMaxRate" :label="$t('proManage.overdueMaxAmount')">
            <template slot-scope="scope">
              <span>{{$store.getters.twoPoint(scope.row.overdueMaxRate)}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="overdueMaxDays" :label="$t('proManage.overdueMaxDays')">
          </el-table-column>
          <!-- <el-table-column align="center" prop="canAdvanceType" :label="$t('proManage.canAdvanceType')">
            <template slot-scope="scope">
              <span>{{scope.row.canAdvanceType==1?$t('new.no47'):$t('new.no46')}}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="canAdvanceDay" :label="$t('proManage.canAdvanceDay')">
          </el-table-column>
          <el-table-column align="center" prop="minSuccessRepayments" :label="$t('proManage.minSuccessRepayments')">
          </el-table-column>
          <el-table-column align="center" prop="userOverdueMaxDays" :label="$t('proManage.userOverdueMaxDays')">
          </el-table-column> -->
          <el-table-column fixed="right" align="center" prop="operation" :label="$t('public.operation')" width="180">
            <template slot-scope="scope">
              <span v-if="$store.state.common.permiss.productlist.includes('edit')" class="table_opr" @click="modifyPro(scope.row)">{{$t('public.no51')}}</span>
              <span v-if="$store.state.common.permiss.productlist.includes('copy')&&!scope.row.initDataBO.thisProductDefaultCount>0" class="table_opr" @click="copyPro(scope.row.id,scope.row.appPackage)">{{$t('proManage.copyPro')}}</span>
              <span v-if="$store.state.common.permiss.productlist.includes('delpro')" class="table_opr" @click="delPro(scope.row.id,scope.row.appPackage)">{{$t('idManage.del')}}
              </span>
            </template>
          </el-table-column>
        </el-table>
    </div>
    <el-row  type="flex" justify="end">
      <div class="pages" v-if="true">
        <el-pagination
          @current-change="handleCurrentChange2"
          :current-page="currentPage2"
          layout="total, prev, pager, next, ->"
          :total="pageTotal2?pageTotal2:0">
        </el-pagination>
      </div>
    </el-row>
    <!-- ------------------添加包名开始-------------------- -->
    <el-dialog :title="$t('proManage.addApk')" :visible.sync="apkVisible"  width="600px">
      <el-form :model="appForm" size="small" ref="appForm" label-width="140px">
        <el-form-item :label="$t('public.appName')">
          <el-input v-model="appForm.appName" style="width:215px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('public.appPackage')">
          <el-input v-model="appForm.appPackage" style="width:215px;"></el-input>
        </el-form-item>
        <el-form-item :label="$t('proManage.version')">
          <el-input v-model="appForm.version" style="width:215px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="apkVisible = false">{{$t('public.no50')}}</el-button>
        <el-button type="primary" @click="apksubmit">{{$t('public.no49')}}</el-button>
      </div>
    </el-dialog>
    <!-- 版本升级 -->
    <el-dialog :title="$t('proManage.appUpdate')" :visible.sync="apkUpVisible"  width="600px">
      <el-form :model="appUpForm" ref="appUpForm" size="small"  label-width="140px">
        <el-form-item :label="$t('new.no49')">
          <el-input v-model="appUpForm.appPackage" style="width:215px;" disabled></el-input>
        </el-form-item>
        <el-form-item :label="$t('proManage.no5')">
          <el-input v-model="appUpForm.newAppPackage" style="width:215px;"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="apkUpVisible = false">{{$t('public.no50')}}</el-button>
        <el-button type="primary" @click="appUpsubmit">{{$t('public.no49')}}</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="$t('proManage.copyPro')" :visible.sync="copyProVisible"  width="600px">
      <el-form :model="copyForm" size="small" ref="copyForm" label-width="140px">
        <el-form-item :label="$t('new.no49')">
          <el-select size="small" disabled v-model="copyForm.oldPackage" :placeholder="$t('public.placeholder')">
            <el-option v-for="item in copyOption1" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('proManage.no1')">
          <el-select size="small" v-model="copyForm.appPackage" :placeholder="$t('public.placeholder')">
            <el-option v-for="item in copyOption2" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="copyProVisible = false">{{$t('public.no50')}}</el-button>
        <el-button type="primary" @click="copySure">{{$t('public.no49')}}</el-button>
      </div>
    </el-dialog>
    <addpro :addVisible.sync="addProVisible" :showpro.sync="showpro" :appNameOption="appNameOption" :addOrEdit="addOrEdit" :selectApk="selectApk" v-if="addProVisible" :datas="selectRows" v-on:prolist='getProlist'></addpro>
    <div class="foot"></div>
  </div>
</template>
<script>
import addpro from './AddPro'
import getApp from 'src/mixins/getApp.js';//获取app和aok
export default{
  components: {
    addpro,
  },
  mixins:[getApp],
  data () {
    const searchData=[
      {
        type: 'select',
        label: 'public.appName',
        attr: 'appName',
        option: [],
        value: '',
        langFlag: true,
      },{
        type: 'select',
        label: 'public.appPackage',
        attr: 'appPackage',
        option:[],
        value: '',
        langFlag: true,
      }
    ]
    return {
      showpro:true,
      flag: true,
      loadFlag:true,
      loadFlag1:false,
      searchData:searchData,
      pageTotal1: 0, // 分页总数
      currentPage1: 1, // 当前页下标
      pageSize1: 10, // 每页条数
      pageTotal2: 0, // 分页总数
      currentPage2: 1, // 当前页下标
      pageSize2: 10, // 每页条数
      selectApk:'',
      tableData1:[],
      tableData2:[],//产品列表数据
      apkVisible:false,
      addProVisible:false,
      copyProVisible:false,
      selectRows:null,
      appNameOption:null,
      addOrEdit:'',
      copyOption1:[],// 复制前的包名
      copyOption2:[],// 跳转的包名
      serchForm:{},
      appForm:{
        appPackage:'',
        appName:'',
        version:''
      },
      apkUpVisible:false,
      appUpForm:{
        appId:'',
        appPackage:'',
        newAppPackage:''
      },
      copyForm:{
        id:'',
        oldPackage:'',
        appPackage:''
      }
    }
  },
  created(){
    this.getApplist();
  },
  mounted(){
    
  },
  watch:{
    showpro(){
      if(!this.showpro){
        this.tableData2=[]
      }
    }
  },
  methods: {
    //product_applist
    handleCurrentChange1 (val) { // 分页按钮第几页
      this.currentPage1 = val;
      this.getApplist();
    },
    handleCurrentChange2 (val) { // 分页按钮第几页
      this.currentPage2 = val;
      this.getProlist();
    },
    search(search) { // 搜索
      this.serchForm = {
        appPackage:search.appPackage,
        appName:search.appName
      };
      this.currentPage1 = 1;
      this.getApplist(); 
    },
    getApplist(){
      this.loadFlag = true;
      let option = {
        pageNum:this.currentPage1,
        pageSize:this.pageSize1,
        param: {
          ...this.serchForm
        }       
      }
      this.$axios.post(this.$action.product_applist, option).then(res => {
        if (res.code == 200) {
          this.tableData1 = res.data.list;
          this.pageTotal1 = res.data.total;
          this.getApp().then(app=>{
            this.searchData[0].option=app.appName;
            this.searchData[1].option=app.appPackage;
            this.copyOption1=app.appPackage;
            this.copyOption2=app.appPackage;
            [ ...this.appNameOption]=app.appPackage;
          })
        }else{
          this.$globalMsg.error(res.message)
        }
        this.loadFlag = false;
      })
    },
    addApp(){
      this.apkVisible = true;
      this.appForm = {
        appPackage:'',
        appName:'',
        version:''
      }
    },
    apksubmit(){
      let option = {
        param: {
          ...this.appForm
        }       
      }
      this.$axios.post(this.$action.product_appAdd, option).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(res.message);
          this.apkVisible=false;
          this.getApplist();
        }else{
          this.$globalMsg.error(res.message)
        }
      })
    },
    changeApp(data){
      this.apkUpVisible = true;
      console.log(data.appPackage);
      this.appUpForm.appId=data.id;
      this.appUpForm.appPackage=data.appPackage;
    },
    appUpsubmit(){
      let option = {
        param: {
          ...this.appUpForm
        }       
      }
      this.$axios.post(this.$action.product_appUpdate, option).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(res.message);
          this.apkUpVisible=false;
          this.getApplist();
        }else{
          this.$globalMsg.error(res.message)
        }
      })
    },
    delapp(id){
      this.$confirm(this.$t('proManage.delApk'), this.$t('public.del'), {
        type: "warning"
      })
      .then(() => {
        let option = {
          param: {
            appId:id
          }       
        }
        this.$axios.post(this.$action.product_appDelete, option).then(res => {
          if (res.code == 200) {
            this.$globalMsg.success(res.message);
            this.getApplist();
          }else{
            this.$globalMsg.error(res.message)
          }
        })
      })
    },
    selectApp(row){
      this.selectApk=row.appPackage;
      this.getProlist();
    },
    getProlist(){
      this.loadFlag1 = true;
      let option = {
        pageNum:this.currentPage2,
        pageSize:this.pageSize2,
        param: {
          appPackage:this.selectApk
        }       
      }
      this.$axios.post(this.$action.product_prolist, option).then(res => {
        if (res.code == 200) {
          this.tableData2 = res.data.list;
          this.pageTotal2 = res.data.total;
        }else{
          this.$globalMsg.error(res.message)
        }
        this.loadFlag1 = false;
      })
    },
    currencyFormat(row, column) {
      if(row.currency==1){
        return 'VND'
      }else if(row.currency==2){
        return 'PHP'
      }else if(row.currency==3){
        return 'Rp'
      }else{
        return '-'
      }
    },
    addPro(){
      this.addProVisible=true;
      this.selectRows =null;
      this.addOrEdit='add';
    },
    modifyPro(val) {
			this.addProVisible = true;
      this.selectRows = JSON.parse(JSON.stringify(val));
      this.addOrEdit='edit';
    },
    delPro(id,apk){
      this.$confirm(this.$t('proManage.delPro'), this.$t('public.del'), {
        type: "warning"
      })
      .then(() => {
        let option = {
          param: {
            id:id,
            appPackage:apk
          }       
        }
        this.$axios.post(this.$action.product_proDel, option).then(res => {
          if (res.code == 200) {
            this.$globalMsg.success(res.message);
            this.getProlist();
          }else{
            this.$globalMsg.error(res.message)
          }
        })
      })
    },
    copyPro(id,appPackage){
      this.copyProVisible = true;
      this.copyForm = {
        id:id,
        oldPackage:appPackage,
        appPackage:''
      }
    },
    copySure(){
      let option = {
          param: {
            ...this.copyForm
          }       
      }
      this.$axios.post(this.$action.product_proCopy, option).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(res.message);
          this.copyProVisible = false;
        }else{
          this.$globalMsg.error(res.message)
        }
      })     
    }
  }
}
</script>
<style scoped lang="scss">

</style>
